<template>
    <div class="tool-bar">
        <el-row class="row-bg" justify="space-between">
            <el-col :span="6">
                <el-space>
                    <el-select v-model="value"  placeholder="python" effect="light" size="small">
                        <el-option
                        v-for="item in list(languages)"
                        :key="item"
                        :label="item"
                        :value="item"
                        />
                    </el-select>
                    <el-select v-model="theme"  placeholder="暗黑" effect="light" size="small" >
                        <el-option
                        v-for="item in list(themes)"
                        :key="item"
                        :label="item"
                        :value="item"
                        />
                    </el-select>
                </el-space>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">
                <el-button color="#626aef"  @click="Run">运行</el-button>
                <el-button color="#626aef"  @click="Submit">提交</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref ,watch} from "vue";
import * as languages from './theme/lang'
import * as themes from './theme/theme'
import emitter from '@/util/emit'
import {mainStore} from '@/store'


const value=ref('')
const theme=ref('')
const store=mainStore()

//监听器
watch([value,theme],([newX, newY])=>{

    emitter.emit('update',{language:(languages as any)[newX],theme:(themes as any)[newY]})

    store.codeInfo.language=value.value;

    // console.info((themes as any)[newY])

})



//方法
const list=(Value:object):string[]=>{
  const result:string[]=[]
  Object.entries(Value).forEach(([k,v])=>{
    result.push(k)
})
  return result
}
//运行
const Run=():void=>{
    emitter.emit("Run",true);
  
}


//提交
const Submit=():void=>{
    emitter.emit("Submit",true);
    store.SubmitCode(value.value)
}



</script>

<style>
    .tool-bar{
        position: relative;
        width: 100%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        height: 6%;
        background-color: var(--el-color-info-light-8);
    }
    

</style>